<!-- header -->
<div class="form-group clearfix ">
  <div class="form-inline pull-left">
    <button class="btn btn-default" (click)="openDialog(1)">新建分类</button>
  </div>
</div>

<!-- body -->
<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>更新时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of tableData">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.created_at}}</td>
        <td>{{item.updated_at}}</td>
        <td class="operate">
          <span (click)="editClassifyDialog(item.id,item.name,item.slug,item.order)">编辑</span>-
          <span (click)="confirmDelDialog(item.id)">删除</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<!--新增分类弹窗-->
<div bsModal #addClassifyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建分类</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addClassifyForm="ngForm">
          <div class="form-group row">
            <div class="col-lg-3"><span class="c-red">*</span>分类名称</div>
            <div class="col-lg-9">
              <input class="form-control" name="title" #title="ngModel" required [(ngModel)]="addClassify.name"/>
              <p [hidden]="title.pristine || title.valid" class="alert alert-danger">分类名称不能为空!</p>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-lg-3"><span class="c-red">*</span>分类描述</div>
            <div class="col-lg-9">
              <input class="form-control" name="slug" #slug="ngModel" required [(ngModel)]="addClassify.slug"/>
              <p [hidden]="slug.pristine || slug.valid" class="alert alert-danger">分类描述不能为空!</p>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-lg-3"><span class="c-red">*</span>排序</div>
            <div class="col-lg-9">
              <input class="form-control" name="order" #order="ngModel" required [(ngModel)]="addClassify.order"/>
              <p [hidden]="order.pristine || order.valid" class="alert alert-danger">排序不能为空!</p>
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer">
        <button type="submit" class="btn btn-success" [disabled]="!addClassifyForm.form.valid"  (click)="submitAddClassifyForm()">确定</button>
        <button (click)="closeModal()" class="btn btn-default">取消</button>
      </div>
    </div>
  </div>
</div>
<!--修改分类弹窗-->
<div bsModal #editClassifyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建分类</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editClassifyForm="ngForm">
          <div class="form-group row">
            <div class="col-lg-3"><span class="c-red">*</span>分类名称</div>
            <div class="col-lg-9">
              <input class="form-control" name="title" #title="ngModel" required [(ngModel)]="editClassify.name"/>
              <p [hidden]="title.pristine || title.valid" class="alert alert-danger">分类名称不能为空!</p>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-lg-3"><span class="c-red">*</span>分类描述</div>
            <div class="col-lg-9">
              <input class="form-control" name="slug" #slug="ngModel" required [(ngModel)]="editClassify.slug"/>
              <p [hidden]="slug.pristine || slug.valid" class="alert alert-danger">分类描述不能为空!</p>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-lg-3"><span class="c-red">*</span>排序</div>
            <div class="col-lg-9">
              <input class="form-control" name="order" #order="ngModel" required [(ngModel)]="editClassify.order"/>
              <p [hidden]="order.pristine || order.valid" class="alert alert-danger">排序不能为空!</p>
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer">
        <button type="submit" class="btn btn-success" [disabled]="!editClassifyForm.form.valid"  (click)="submitEditClassifyForm()">确定</button>
        <button (click)="closeModal()" class="btn btn-default">取消</button>
      </div>
    </div>
  </div>
</div>
<!--确认删除弹窗-->
<div bsModal #confirmDelModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        确定删除此分类？
      </div>
      <div class="model-footer">
        <button type="submit" class="btn btn-success" (click)="submitConfirmDelForm()">确定</button>
        <button type="submit" class="btn btn-default" (click)="closeModal()">取消</button>
      </div>
    </div>
  </div>
</div>
<!--提示框-->
<app-notification [type]="promptType" [message]="promptMsg" [isShow]="isShow" (promptIsShow)="promptIsShow($event)"></app-notification>
